<template>
  <el-dialog v-model="dialogVisible" title="增加" width="500px" @close="dialogVisible = false">
    <el-form ref="formPassRef" :rules="formRules" :model="formPass" label-width="120px">
      <el-form-item label="措施名称" prop="name"  required>
        <el-input v-model="formPass.name" type="text" autocomplete="off" placeholder="请输入措施名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" class="save" @click="changeSubmitFn(formPassRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { reactive , getCurrentInstance ,defineExpose , nextTick,ref } from 'vue';
  type FormInstance = InstanceType<typeof ElForm>;
  let dialogVisible = ref(false)
  const formRules = {
    name: [
      {
        'required': true,
        'message': `请输入措施名称`,
        'trigger': `blur`
      }, {
        'max': 140,
        'message': `长度不能超过140字`,
        'trigger': `blur`
      }
    ]
  }
  const formPassRef = ref();
  let formPass = reactive({
    'name': ``,
  });

  const changeSubmitFn = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    /*formEl.validate(async valid => {
      if (valid) {

      }
    });*/
    dialogVisible.value = false
  }

  // 初始化方法
  const open = () => {
    dialogVisible.value = true
  };

  defineExpose({open})
</script>